<template>
  <div class="btn" :class="[mrClass]" :style="mrBtnStyle" @click="onClicked" :accessible="true" :aria-label="text">
    <text class="btn-text" :style="mrTextStyle">{{text}}</text>
  </div>
</template>

<script>
const STYLE_MAP = {
  primary: {
    backgroundColor: '#42bd56'
  },
  red: {
    backgroundColor: '#e51c23'
  },
  yellow: {
    backgroundColor: '#ffab19'
  },
  white: {
    backgroundColor: '#FFFFFF',
    borderColor: '#DDDDDD',
    borderWidth: '1px'
  },
  blue: {
    backgroundColor: '#0F8DE8'
  },
  green: {
    backgroundColor: '#5cb85c'
  }
}

const TEXT_STYLE_MAP = {
  primary: {
    color: '#FFFFFF'
  },
  red: {
    color: '#FFFFFF'
  },
  yellow: {
    color: '#FFFFFF'
  },
  blue: {
    color: '#FFFFFF'
  },
  white: {
    color: '#3D3D3D'
  },
  green: {
    color: '#FFFFFF'
  }
}

const BUTTON_STYLE_MAP = {
  full: {
    width: '702px',
    height: '80px',
    marginLeft: '24px'
  },
  big: {
    width: '339px',
    height: '70px'
  },
  medium: {
    width: '218px',
    height: '60px'
  },
  small: {
    width: '157px',
    height: '44px'
  }
}

const TEXT_FONTSIZE_STYLE_MAP = {
  full: {
    fontSize: '34px'
  },
  big: {
    fontSize: '32px'
  },
  medium: {
    fontSize: '28px'
  },
  small: {
    fontSize: '24px'
  }
}

export default {
  props: {
    text: {
      type: String,
      default: '确认'
    },
    size: {
      type: String,
      default: 'full'
    },
    type: {
      type: String,
      default: 'primary'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    btnStyle: Object,
    textStyle: Object,
    disabledStyle: Object
  },
  computed: {
    mrClass() {
      return this.disabled ? '' : `btn-${this.type}`
    },
    mrBtnStyle() {
      const { type, disabled, btnStyle, size, disabledStyle } = this
      const mrBtnStyle = {
        ...STYLE_MAP[type],
        ...BUTTON_STYLE_MAP[size],
        ...btnStyle
      }
      let disabledInStyle = { opacity: 0.4 }
      if (type === 'white') {
        disabledInStyle = { backgroundColor: 'rgba(0, 0, 0, 0.1)' }
      }
      return disabled ? {
        ...mrBtnStyle,
        ...disabledInStyle,
        ...disabledStyle,
        borderWidth: 0
      } : mrBtnStyle
    },
    mrTextStyle() {
      const { type, disabled, textStyle, size } = this
      const mrTextStyle = { ...TEXT_STYLE_MAP[type], ...textStyle, ...TEXT_FONTSIZE_STYLE_MAP[size] }
      return disabled ? { ...mrTextStyle, color: '#FFFFFF' } : mrTextStyle
    }
  },
  methods: {
    onClicked(e) {
      const { type, disabled } = this
      if (!disabled) {
        this.$emit('buttonClicked', { e, type, disabled })
      }
    }
  }
};
</script>

<style scoped>
.btn {
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  opacity: 1;
}
.btn-primary:active {
  background-color: #287134;
}
.btn-red:active {
  background-color: #c33d00;
}
.btn-yellow:active {
  background-color: #cca410;
}
.btn-white:active {
  background-color: #eeeeee;
}
.btn-blue:active {
  background-color: #0a74c1;
}
.btn-green:active {
  background-color: #3b943b;
}
.btn-text {
  text-overflow: ellipsis;
  lines: 1;
  color: #ffffff;
}
</style>